<template>
  <Layout>
    <div class="Solutions">
      <Loading :isLoading="isLoading"/>
      <SolutionBanner />
      <SolutionApplications :applicationsArr="applicationsArr" title="Solution" @getSize="getSize"/>
    </div>
  </Layout>
</template>

<script>
import Layout from '/@/components/layout/Layout.vue'
import Loading from '/@/components/Loading.vue'
import SolutionBanner from '../components/solutions/SolutionBanner.vue'
import SolutionApplications from '../components/solutions/SolutionApplications.vue'
import {getScenePlanList} from "../api/home";
import {ref,onMounted} from "vue";
export default {
  name: 'Solutions',
  components:{SolutionBanner,SolutionApplications,Layout,Loading},
  setup(){
    let isLoading = ref(true);
    let applicationsArr = ref([])
    onMounted(()=>{
      getScenePlan({
        page:1,
        pageSize:6,
        sceneId:""
      })
    })
    const getScenePlan = (data) => {
      getScenePlanList({
        "page":data.page,
        "page_size":data.pageSize,
        "sceneId":data.sceneId
      }).then((res)=>{
        if(res && res.code === 200){
          applicationsArr.value = res.data
          isLoading.value = false
        }
      })
    }
    const getSize = (data) => {
      getScenePlan({
        page:1,
        pageSize:data,
        sceneId:""
      })
    }
    return{
      applicationsArr,
      isLoading,
      getScenePlan,
      getSize
    }
  }
}
</script>
